<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6-7</title>
    <style>
        tr {
            height: 50px;
            width: 50px;
        }
        
        .blue {
            background-color: rgb(28, 163, 241);
        }
        
        td {
            height: 50px;
            width: 50px;
            border: 1px solid;
        }
        
        table {
            border: 1px solid;
            border-collapse: collapse;
            /* margin: 100px auto; */
        }
        
        .width1 {
            width: 150px;
        }
        
        .width2 {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr class="blue">
            <td><input type="checkbox" name="box"></td>
            <td class="width1" align="center">商品</td>
            <td class="width2" align="center">价钱</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td class="width1">IPhone8</td>
            <td class="width2">8000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td class="width1">IPad ProS</td>
            <td class="width2">5000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td class="width1">ipad air</td>
            <td class="width2">2000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td class="width1">apple watch</td>
            <td>2000</td>
        </tr>
    </table>
    <script>
        var inputs = document.getElementsByTagName('input');
        inputs[0].onclick = function() {
            for (let i = 1; i < inputs.length; i++) {
                inputs[i].checked = this.checked;
            }
        }

        for (let i = 1; i < inputs.length; i++) {
            inputs[i].onclick = function() {
                let flag = true;
                for (let m = 1; m < inputs.length; m++) {
                    if (inputs[m].checked != true) {
                        flag = false;

                    }
                }
                inputs[0].checked = flag;
            }
        }
    </script>
</body>

</html>